<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品复购与用户行为分析可视化</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="echarts.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CBCB',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/css">
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
            min-height: 100vh;
        }

        .chart-container {
            transition: all 0.3s ease;
        }

        .card-hover {
            transition: all 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .stat-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
        }

        .glow {
            box-shadow: 0 0 15px rgba(22, 93, 255, 0.2);
        }

        .progress-bar {
            height: 6px;
            background: #e9ecef;
            border-radius: 3px;
            overflow: hidden;
        }

        .progress-value {
            height: 100%;
            border-radius: 3px;
        }

        .header-gradient {
            background: linear-gradient(120deg, #1e3c72 0%, #2a5298 100%);
        }

        .chart-title {
            border-left: 4px solid #165DFF;
            padding-left: 12px;
        }

        .data-table {
            border-collapse: separate;
            border-spacing: 0;
            width: 100%;
        }

        .data-table th {
            background-color: #f8f9fa;
        }

        .data-table tr:nth-child(even) {
            background-color: #f8f9fa;
        }

        .user-badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .grid-layout {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }

        @media (max-width: 1024px) {
            .grid-layout {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>

<body class="font-inter text-dark">
<!-- 页面头部 -->
<header class="bg-[#fefefe] text-black shadow-lg">
    <div class="container mx-auto px-4 py-6">
        <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold flex items-center">
            <img src="1.png" alt="Custom Image" class="mr-3 h-12 w-12">商品复购与用户行为分析可视化
        </h1>
        <p class="text-gray-600 mt-2 max-w-3xl">基于商品ID与用户行为的综合分析</p>
    </div>
</header>

<!-- 主要内容 -->
<main class="container mx-auto px-4 py-8">
    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <!-- 最高复购商品卡片 -->
        <div class="stat-card glow">
            <div class="p-6">
                <div class="flex items-center mb-4">
                    <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center mr-4">
                        <i class="fa fa-trophy text-primary text-xl"></i>
                    </div>
                    <div>
                        <div class="stat-value text-primary" id="highestRepurchaseValue">97655171: 37次</div>
                        <div class="stat-label">最高复购商品</div>
                    </div>
                </div>
                <div class="progress-bar">
                    <div class="progress-value bg-primary" style="width: 100%"></div>
                </div>
            </div>
        </div>

        <!-- 最活跃用户卡片 -->
        <div class="stat-card">
            <div class="p-6">
                <div class="flex items-center mb-4">
                    <div class="w-12 h-12 rounded-full bg-danger/10 flex items-center justify-center mr-4">
                        <i class="fa fa-bolt text-danger text-xl"></i>
                    </div>
                    <div>
                        <div class="stat-value text-danger" id="activeUserValue">36233277: 2790次浏览</div>
                        <div class="stat-label">最活跃用户</div>
                    </div>
                </div>
                <div class="progress-bar">
                    <div class="progress-value bg-danger" style="width: 100%"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 图表网格 -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 mb-8">
        <!-- 左侧图表 - 横向条形图 -->
        <div class="lg:col-span-7">
            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                <div class="p-5 border-b border-gray-100">
                    <h3 class="text-xl font-semibold chart-title">
                        <i class="fa fa-bars text-primary mr-2"></i>商品复购次数排名
                    </h3>
                    <p class="text-gray-600 mt-1 text-sm">展示复购次数最高的商品排名</p>
                </div>
                <div class="chart-container p-4" id="barChart" style="height: 400px;"></div>
            </div>
        </div>

        <!-- 右侧图表 - 环形图 -->
        <div class="lg:col-span-5">
            <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
                <div class="p-5 border-b border-gray-100">
                    <h3 class="text-xl font-semibold chart-title">
                        <i class="fa fa-pie-chart text-success mr-2"></i>复购次数分布
                    </h3>
                    <p class="text-gray-600 mt-1 text-sm">各商品在总复购次数中的占比</p>
                </div>
                <div class="chart-container p-4" id="pieChart" style="height: 400px;"></div>
            </div>
        </div>
    </div>

    <!-- 新添加的用户行为图表 -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <!-- 用户行为对比柱状图 -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
            <div class="p-5 border-b border-gray-100">
                <h3 class="text-xl font-semibold chart-title">
                    <i class="fa fa-bar-chart text-warning mr-2"></i>活跃用户行为对比
                </h3>
                <p class="text-gray-600 mt-1 text-sm">最活跃用户的浏览与购买行为对比</p>
            </div>
            <div class="chart-container p-4" id="activeBarChart" style="height: 400px;"></div>
        </div>

        <!-- 购买欲望分布饼图 -->
        <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
            <div class="p-5 border-b border-gray-100">
                <h3 class="text-xl font-semibold chart-title">
                    <i class="fa fa-pie-chart text-danger mr-2"></i>购买欲望分布
                </h3>
                <p class="text-gray-600 mt-1 text-sm">不同活跃用户的购买欲望分布情况</p>
            </div>
            <div class="chart-container p-4" id="activePieChart" style="height: 400px;"></div>
        </div>
    </div>

    <!-- 分析洞察 -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden card-hover">
        <div class="p-5 border-b border-gray-100">
            <h3 class="text-xl font-semibold chart-title">
                <i class="fa fa-lightbulb-o text-warning mr-2"></i>数据分析
            </h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-blue-50 rounded-lg p-5">
                    <div class="flex items-start">
                        <i class="fa fa-star text-blue-600 text-2xl mr-3 mt-1"></i>
                        <div>
                            <h4 class="font-bold text-lg text-blue-800">头部效应明显</h4>
                            <p class="mt-2 text-gray-700">排名第一的商品复购次数达37次，占所有商品复购总量的18%，远超平均值20.4次</p>
                        </div>
                    </div>
                </div>
                <div class="bg-green-50 rounded-lg p-5">
                    <div class="flex items-start">
                        <i class="fa fa-users text-green-600 text-2xl mr-3 mt-1"></i>
                        <div>
                            <h4 class="font-bold text-lg text-green-800">用户活跃度分析</h4>
                            <p class="mt-2 text-gray-700">最活跃用户浏览次数达2790次，但购买欲望仅0.29%，显示高浏览低转化特征</p>
                        </div>
                    </div>
                </div>
                <div class="bg-purple-50 rounded-lg p-5">
                    <div class="flex items-start">
                        <i class="fa fa-percent text-purple-600 text-2xl mr-3 mt-1"></i>
                        <div>
                            <h4 class="font-bold text-lg text-purple-800">高复购商品集中</h4>
                            <p class="mt-2 text-gray-700">前3名商品复购次数占总量的40%，前5名占总量的59%，显示出高复购商品较为集中</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-dark text-white mt-12 py-8">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <h2 class="text-xl font-semibold">商品复购与用户行为分析</h2>
            </div>
        </div>
        <div class="border-t border-gray-800 mt-6 pt-6 text-center text-gray-500 text-sm">
            &copy; 小组成员 李泽霖 朱志斌 宋云昊 王时琛 邱俊岚 李继拓 杨一博
        </div>
    </div>
</footer>

<script>
    // 商品复购数据
    const repurchaseData = [{
        item_id: '97655171',
        total_repurchase_count: 37
    }, {
        item_id: '303205878',
        total_repurchase_count: 23
    }, {
        item_id: '387911330',
        total_repurchase_count: 21
    }, {
        item_id: '58727293',
        total_repurchase_count: 18
    }, {
        item_id: '143931242',
        total_repurchase_count: 18
    }, {
        item_id: '149516337',
        total_repurchase_count: 18
    }, {
        item_id: '25330046',
        total_repurchase_count: 17
    }, {
        item_id: '224806454',
        total_repurchase_count: 17
    }, {
        item_id: '276636269',
        total_repurchase_count: 17
    }, {
        item_id: '211781109',
        total_repurchase_count: 16
    }];

    // 活跃用户数据
    const activeUserData = [{
        user_id: '36233277',
        total_browse_count: 2790,
        items_with_other_behavior: 8,
        purchase_desire: 0.0029
    }, {
        user_id: '73196588',
        total_browse_count: 2042,
        items_with_other_behavior: 0,
        purchase_desire: 0
    }, {
        user_id: '59511789',
        total_browse_count: 1925,
        items_with_other_behavior: 21,
        purchase_desire: 0.0109
    }, {
        user_id: '130270245',
        total_browse_count: 1855,
        items_with_other_behavior: 6,
        purchase_desire: 0.0032
    }, {
        user_id: '65645933',
        total_browse_count: 1844,
        items_with_other_behavior: 4,
        purchase_desire: 0.0022
    }, {
        user_id: '83813302',
        total_browse_count: 1743,
        items_with_other_behavior: 6,
        purchase_desire: 0.0034
    }, {
        user_id: '7234861',
        total_browse_count: 1573,
        items_with_other_behavior: 14,
        purchase_desire: 0.0089
    }, {
        user_id: '137175187',
        total_browse_count: 1243,
        items_with_other_behavior: 14,
        purchase_desire: 0.0113
    }, {
        user_id: '52577851',
        total_browse_count: 1232,
        items_with_other_behavior: 10,
        purchase_desire: 0.0081
    }, {
        user_id: '52772551',
        total_browse_count: 1230,
        items_with_other_behavior: 2,
        purchase_desire: 0.0016
    }, {
        user_id: '74314315',
        total_browse_count: 1217,
        items_with_other_behavior: 4,
        purchase_desire: 0.0033
    }, {
        user_id: '139435539',
        total_browse_count: 1188,
        items_with_other_behavior: 14,
        purchase_desire: 0.0118
    }, {
        user_id: '53080199',
        total_browse_count: 1188,
        items_with_other_behavior: 8,
        purchase_desire: 0.0067
    }, {
        user_id: '123842164',
        total_browse_count: 1159,
        items_with_other_behavior: 21,
        purchase_desire: 0.0181
    }, {
        user_id: '131573117',
        total_browse_count: 1133,
        items_with_other_behavior: 13,
        purchase_desire: 0.0115
    }];

    // 计算统计值
    const totalRepurchase = repurchaseData.reduce((sum, item) => sum + item.total_repurchase_count, 0);
    const topItem = repurchaseData[0];
    const topActiveUser = activeUserData[0];

    // 更新统计卡片
    document.getElementById('highestRepurchaseValue').textContent = `${topItem.item_id}: ${topItem.total_repurchase_count}次`;
    document.getElementById('activeUserValue').textContent = `${topActiveUser.user_id}: ${topActiveUser.total_browse_count}次浏览`;

    // 准备图表数据
    const itemIds = repurchaseData.map(item => `商品 ${item.item_id}`);
    const repurchaseCounts = repurchaseData.map(item => item.total_repurchase_count);
    const percentages = repurchaseData.map(item =>
        ((item.total_repurchase_count / totalRepurchase) * 100).toFixed(1) + '%'
    );

    // 排序（从高到低）
    const sortedData = [...repurchaseData].sort((a, b) => b.total_repurchase_count - a.total_repurchase_count);

    // 准备饼图数据
    const pieData = sortedData.map((item, index) => ({
        value: item.total_repurchase_count,
        name: `商品 ${item.item_id}`,
        percent: ((item.total_repurchase_count / totalRepurchase) * 100).toFixed(1)
    }));

    // 初始化所有图表
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化柱状图（横向）
        const barChart = echarts.init(document.getElementById('barChart'));
        const barOption = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function(params) {
                    const data = params[0];
                    return `商品ID: ${data.name.split(' ')[1]}<br/>复购次数: ${data.value}次<br/>占比: ${percentages[data.dataIndex]}`;
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 次'
                }
            },
            yAxis: {
                type: 'category',
                data: itemIds,
                axisLabel: {
                    interval: 0,
                    formatter: function(value) {
                        return value.length > 12 ? value.substring(0, 10) + '...' : value;
                    }
                }
            },
            series: [{
                name: '复购次数',
                type: 'bar',
                data: repurchaseCounts,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: '#36CBCB'
                    }, {
                        offset: 1,
                        color: '#165DFF'
                    }])
                },
                label: {
                    show: true,
                    position: 'right',
                    formatter: '{c} 次'
                }
            }]
        };
        barChart.setOption(barOption);

        // 初始化饼图（环形）
        const pieChart = echarts.init(document.getElementById('pieChart'));
        const pieOption = {
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    return `${params.name}<br/>复购次数: ${params.value}次<br/>占比: ${params.data.percent}%`;
                }
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 'center',
                formatter: function(name) {
                    const item = pieData.find(d => d.name === name);
                    return item ? `${name}: ${item.value}次` : name;
                }
            },
            series: [{
                name: '复购次数',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['40%', '50%'],
                avoidLabelOverlap: true,
                itemStyle: {
                    borderRadius: 6,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    formatter: function(params) {
                        return `${params.name}\n${params.data.percent}%`;
                    }
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '14',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true
                },
                data: pieData
            }]
        };
        pieChart.setOption(pieOption);

        // 活跃用户柱状图
        const activeBarChart = echarts.init(document.getElementById('activeBarChart'));
        // 按总浏览数排序取前10
        const sortedActiveUsers = [...activeUserData].sort((a, b) => b.total_browse_count - a.total_browse_count).slice(0, 10);

        const barOption2 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function(params) {
                    const data = params[0];
                    const user = sortedActiveUsers[data.dataIndex];
                    return `用户ID: ${user.user_id}<br/>总浏览数: ${user.total_browse_count}次<br/>购买数: ${user.items_with_other_behavior}次<br/>购买欲望: ${(user.purchase_desire * 100).toFixed(2)}%`;
                }
            },
            legend: {
                data: ['总浏览数'],
                bottom: 10
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: sortedActiveUsers.map(user => user.user_id),
                axisLabel: {
                    interval: 0,
                    rotate: 30
                }
            },
            yAxis: {
                type: 'value',
                name: '次数'
            },
            series: [{
                name: '总浏览数',
                type: 'bar',
                data: sortedActiveUsers.map(user => user.total_browse_count),
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#36CBCB'
                    }, {
                        offset: 1,
                        color: '#165DFF'
                    }])
                }
            }]
        };
        activeBarChart.setOption(barOption2);

        // 活跃用户饼图（按购买欲望分组）
        const activePieChart = echarts.init(document.getElementById('activePieChart'));

        // 按购买欲望分组
        const desireGroups = {
            '高欲望 (>1%)': 0,
            '中欲望 (0.5%-1%)': 0,
            '低欲望 (<0.5%)': 0,
            '无购买 (0%)': 0
        };

        activeUserData.forEach(user => {
            if (user.purchase_desire === 0) {
                desireGroups['无购买 (0%)']++;
            } else if (user.purchase_desire < 0.005) {
                desireGroups['低欲望 (<0.5%)']++;
            } else if (user.purchase_desire < 0.01) {
                desireGroups['中欲望 (0.5%-1%)']++;
            } else {
                desireGroups['高欲望 (>1%)']++;
            }
        });

        const pieData2 = Object.keys(desireGroups).map(key => ({
            name: key,
            value: desireGroups[key]
        }));

        const pieOption2 = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} 人 ({d}%)'
            },
            legend: {
                orient: 'vertical',
                right: 10,
                top: 'center',
                formatter: function(name) {
                    return name + ': ' + desireGroups[name] + '人';
                }
            },
            series: [{
                name: '购买欲望分布',
                type: 'pie',
                radius: ['40%', '70%'],
                center: ['40%', '50%'],
                avoidLabelOverlap: true,
                itemStyle: {
                    borderRadius: 6,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    formatter: '{d}%'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '14',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: true
                },
                data: pieData2
            }]
        };
        activePieChart.setOption(pieOption2);

        // 响应窗口大小变化
        window.addEventListener('resize', function() {
            barChart.resize();
            pieChart.resize();
            activeBarChart.resize();
            activePieChart.resize();
        });
    });
</script>
</body>

</html>